<!--<template>-->
<!--&lt;!&ndash;模态框&ndash;&gt;-->
<!--<div>-->
<!--<div v-if="is_num == 1">-->
<!--<el-dialog title="编辑" :visible.sync="dialogFormVisible">-->
<!--<el-form :model="form">-->

<!--<el-form-item label="手机号" :label-width="formLabelWidth">-->
<!--<el-input v-model="form.mobile" auto-complete="off"></el-input>-->
<!--</el-form-item>-->
<!--<el-form-item label="微信ID" :label-width="formLabelWidth">-->
<!--<el-input v-model="form.weixinid" auto-complete="off"></el-input>-->
<!--</el-form-item>-->
<!--<el-form-item label="邮箱" :label-width="formLabelWidth">-->
<!--<el-input v-model="form.email" auto-complete="off"></el-input>-->
<!--</el-form-item>-->
<!--</el-form>-->
<!--<div slot="footer" class="dialog-footer">-->
<!--<el-button @click="dialogFormVisible = false">取 消</el-button>-->
<!--<el-button type="primary" @click="UpdateUser(userfirst.id, dialogFormVisible = false)">确 定</el-button>-->
<!--</div>-->
<!--</el-dialog>-->
<!--</div>-->

<!--&lt;!&ndash;角色管理&ndash;&gt;-->
<!--<div v-else>-->
<!--<el-dialog title="角色管理" :visible.sync="dialogFormVisible">-->
<!--<el-form :model="form">-->
<!--<el-form-item label="名称" :label-width="formLabelWidth">-->
<!--<el-input v-model="form.username" auto-complete="off" :disabled="true"></el-input>-->
<!--</el-form-item>-->
<!--<el-form-item label="选择角色" :label-width="formLabelWidth">-->
<!--<el-select v-model="ro" multiple placeholder="请选择">-->
<!--<el-option-->
<!--v-for="item in role"-->
<!--:key="item.zh_name"-->
<!--:label="item.name"-->
<!--:value="item.zh_name">-->
<!--</el-option>-->
<!--</el-select>-->
<!--</el-form-item>-->
<!--</el-form>-->
<!--<div slot="footer" class="dialog-footer">-->
<!--<el-button @click="dialogFormVisible = false">取 消</el-button>-->
<!--<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>-->
<!--</div>-->
<!--</el-dialog>-->
<!--</div>-->


<!--<el-table-->
<!--:data="tableData"-->
<!--style="width: 100%">-->


<!--<el-table-column-->
<!--label="ID"-->
<!--width="70">-->
<!--<template slot-scope="scope">-->
<!--<el-tag size="medium" type="success">{{ scope.row.id }}</el-tag>-->
<!--</template>-->
<!--</el-table-column>-->


<!--<el-table-column-->
<!--label="姓名"-->
<!--width="180">-->
<!--<template slot-scope="scope">-->
<!--<el-popover trigger="hover" placement="top">-->
<!--<p>姓名: {{ scope.row.username }}</p>-->
<!--<p>职位: <span v-for="c in scope.row.role">{{ c.zh_name }}</span></p>-->
<!--<div slot="reference" class="name-wrapper">-->
<!--<el-tag size="medium">{{ scope.row.username }}</el-tag>-->
<!--</div>-->
<!--</el-popover>-->
<!--</template>-->
<!--</el-table-column>-->


<!--<el-table-column-->
<!--label="手机号"-->
<!--width="180">-->
<!--<template slot-scope="scope">-->
<!--<el-tag size="medium" type="success">{{ scope.row.email }}</el-tag>-->
<!--</template>-->
<!--</el-table-column>-->


<!--<el-table-column-->
<!--label="微信ID"-->
<!--width="180">-->
<!--<template slot-scope="scope">-->
<!--<el-tag size="medium" type="success">{{ scope.row.weixinid }}</el-tag>-->
<!--</template>-->
<!--</el-table-column>-->


<!--<el-table-column-->
<!--label="邮箱"-->
<!--width="180">-->
<!--<template slot-scope="scope">-->
<!--<el-tag size="medium" type="success">{{ scope.row.email }}</el-tag>-->
<!--</template>-->
<!--</el-table-column>-->

<!--<el-table-column label="操作">-->
<!--<template slot-scope="scope">-->
<!--<el-button-->
<!--size="mini"-->
<!--@click="handleEdit(scope.row.id,dialogFormVisible = true)">-->
<!--<span @click="upd_num(1)">编辑</span>-->
<!--</el-button>-->
<!--<el-button-->
<!--size="mini"-->
<!--type="danger"-->
<!--@click="handleDelete(scope.row.id)">删除-->
<!--</el-button>-->
<!--<el-button-->
<!--size="mini"-->
<!--type="primary" @click="handleEdit(scope.row.id,dialogFormVisible = true)">-->
<!--<span @click="upd_num(2,scope.row.id)">角色管理</span>-->
<!--</el-button>-->

<!--</template>-->
<!--</el-table-column>-->
<!--</el-table>-->

<!--</div>-->
<!--</template>-->

<!--<script>-->
<!--import {getUserList, postDelete, getUpdateUser,postUpdateUser} from '../../api/api'-->

<!--export default {-->

<!--data() {-->
<!--return {-->
<!--tableData: [{-->
<!--id: null,-->
<!--username: '',-->
<!--role: null,-->
<!--mobile: '',-->
<!--email: '',-->
<!--weixinid: ''-->
<!--},],-->
<!--dialogTableVisible: false,-->
<!--dialogFormVisible: false,-->
<!--is_num: 0,-->
<!--form: {-->
<!--username:'',-->
<!--mobile: '',-->
<!--email: '',-->
<!--weixinid: '',-->
<!--},-->
<!--userfirst:null,-->
<!--formLabelWidth: '120px',-->
<!--role: [],-->
<!--ro:null-->
<!--}-->
<!--},-->
<!--mounted() {-->
<!--this.getUsers()-->
<!--},-->
<!--methods: {-->
<!--upd_num(num,index) {-->
<!--this.is_num = num;-->
<!--if(this.is_num == 2){-->
<!--getRole({'id':index}).then(res=>{-->
<!--this.role = res.role-->
<!--})-->
<!--}-->
<!--},-->
<!--//获取所有用户-->
<!--getUsers() {-->
<!--getUserList().then(res => {-->
<!--this.tableData = res.users-->
<!--})-->
<!--},-->
<!--handleDelete(index) {-->
<!--this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {-->
<!--confirmButtonText: '确定',-->
<!--cancelButtonText: '取消',-->
<!--type: 'warning',-->
<!--}).then(() => {-->
<!--postDelete({'id': index}).then(res => {-->
<!--if (res.code == 200) {-->
<!--this.$message({-->
<!--type: 'success',-->
<!--message: '删除成功!',-->
<!--});-->
<!--this.getUsers()-->
<!--} else {-->
<!--this.$message({-->
<!--type: 'success',-->
<!--message: '删除失败!'-->
<!--});-->
<!--}-->
<!--}-->
<!--).catch(() => {-->
<!--this.$message({-->
<!--type: 'info',-->
<!--message: '已取消删除'-->
<!--});-->
<!--});-->
<!--})-->

<!--},-->
<!--UpdateUser(index){-->
<!--postUpdateUser({-->
<!--'id':index,-->
<!--'mobile':this.form.mobile,-->
<!--'weixinid':this.form.weixinid,-->
<!--'email':this.form.email-->
<!--}).then(res=>{-->
<!--if(res.code == 200){-->
<!--this.getUsers()-->
<!--}-->
<!--})-->
<!--},-->
<!--handleEdit(index) {-->
<!--getUpdateUser({'id':index}).then(res=>{-->
<!--this.userfirst = res.user-->
<!--this.form.mobile = this.userfirst.mobile-->
<!--this.form.weixinid = this.userfirst.weixinid-->
<!--this.form.email = this.userfirst.email-->
<!--this.form.username = this.userfirst.username-->
<!--}).then(()=>{-->
<!--})-->
<!--},-->

<!--}-->
<!--}-->
<!--</script>-->

<template>
  <el-row class="page-body">
    <el-row>
      <el-table
        :data="tableData"
        style="margin-top: 20px">
        <el-table-column
          label="ID"
          width="60">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="用户名"
          width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>用户名: {{ scope.row.username }}</p>
              <p>角色:
                <el-tag :key="index" v-for="(item,index) in scope.row.role" size="medium">{{ item.zh_name
                  }}
                </el-tag>
              </p>
              <p>部门:
                <el-tag :key="index" v-for="(item,index) in scope.row.department_set" size="medium">&nbsp; {{
                  item.name }} &nbsp;
                </el-tag>
              </p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.username }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column
          label="手机号"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.mobile }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="微信ID"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.weixinid }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="邮箱"
          width="220">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.email }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row.mobile,scope.row.email,scope.row.weixinid,scope.row.id)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)">删除
            </el-button>
            <el-button
              size="mini"
              type="info"
              @click="addRole(scope.row.username)">角色管理
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <!--编辑-->
    <el-row>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="手机号">
            <el-input v-model="form.mobile"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item label="微信ID">
            <el-input v-model="form.weixinid"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitEdit">更新</el-button>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
              </span>
      </el-dialog>
    </el-row>


    <!--添加角色-->
    <el-row>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible2"
        width="30%"
        :before-close="handleClose">
        <el-form label-position="top" :model="formInline" class="demo-form-inline">
          <el-form-item label="用户">
            <el-input disabled v-model="formInline.user" placeholder="用户"></el-input>
          </el-form-item>

          <el-form-item label="选择角色">
            <el-select style="min-width: 500px" v-model="value5" multiple placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.zh_name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="updRole">确 定</el-button>
        <!--</span>-->
      </el-dialog>
    </el-row>
  </el-row>


</template>

<script>
  import axios from 'axios'
  import {getUserList, postUpdateUser, postDelete, getRole} from '../../api/api'

  export default {
    data() {
      return {
        options: [],
        value5: [],
        dialogVisible: false,
        dialogVisible2: false,
        search: '',
        form: {
          mobile: '',
          email: '',
          weixinid: '',
        },
        formInline: {
          user: '',
          region: ''
        },
        tableData: []
      }
    },
    created() {
      this.initPage()
    },

    methods: {
      updRole() {
        postUpdateUser({'username': this.formInline.user, 'ur': this.value5}).then(resp => {
          // console.log(resp)
          if (resp.code == 200) {
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success'
            });
            this.initPage()
          } else {
            this.$notify.error({
              title: '错误',
              message: '修改失败'
            });
          }
        }).catch(err => {
          console.log(err)
        })
        this.dialogVisible2 = false;
      },
      initPage() {
        getUserList().then(resp => {
          // console.log(resp)
          this.tableData = resp.users;
        }).catch(err => {
          console.log(err)
        })
      },
      submitEdit() {
        var data = this.form;
        alert(data)
        postUpdateUser(data).then(resp => {
          if (resp.code == 200) {
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success'
            });
            this.dialogVisible = false;
            this.initPage()
          } else {
            this.$notify.error({
              title: '错误',
              message: '修改失败'
            });
          }

        }).catch(err => {

        })
      },
      handleEdit(mobile, email, weixinid, id) {
        this.dialogVisible = true
        this.form.mobile = mobile
        this.form.email = email
        this.form.weixinid = weixinid
        this.form.id = id
      },
      handleDelete(id) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var data = {'id': id}
          postDelete(data).then(resp => {
            this.initPage()
          }).catch(err => {

          });
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(err => {
          console.log(err)
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      addRole(username) {
        this.dialogVisible2 = true;
        this.formInline.user = username;
        getRole().then(resp => {
          this.options = resp.role;
          getUserList({'username': username}).then(resp => {
            this.value5 = resp.ur_list;
          })
        }).catch(err => {

        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
      }
    }
  }
</script>
